@import "../global/global";

.ring-tabs__tabs {
  position: relative;

  font-size: 0;
  white-space: nowrap;
}

.ring-tabs__container {
  min-height: $ring-unit * 2;
}

.ring-tabs__btn {
  display: inline-block;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;

  height: $ring-unit * 3;
  line-height: $ring-unit*3 - 2;
  margin: 0;
  margin-top: 3px;
  padding: 1px $ring-unit * 2 + 1 0;

  @include ring-font;
  color: $ring-link-color;
  font-size: $ring-font-size;

  border: 0;
  border-bottom: 1px solid;
  border-color: rgba(0, 0, 0, 0.15);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;

  background: none;
  cursor: pointer;

  &.active,
  &.ring-tabs__btn_active,
  &.ring-tabs__btn_focus:before {
    color: $ring-text-color;
    outline: 0;
    user-select: none;

    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.2);
    padding: 0 $ring-unit * 2;
    padding-bottom: 1px; // zero border compensation
    border-bottom: none;

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), transparent 80%);
    background-position: 0 0;
    background-repeat: no-repeat;

    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.1);
  }

  &:hover {
    color: $ring-link-hover-color;
  }

  &.ring-tabs__btn_focus:before {
    content: '';
    display: block;

    width: calc(100% - 1px);
    left: 0;
    height: calc(100% - 1px);
    top: 0;
    position: absolute;
    padding: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;

    padding-top: 1px;
    padding-bottom: 1px;
  }

  &.ring-tabs__btn_focus {
    height: 100%;

    padding: 1px $ring-unit * 2 - 2 1px;
    margin-top: 0;
    border: 3px solid;
    border-color: $ring-outline-color;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom: none;
  }
}

.ring-tabs__btn_disabled,
.ring-tabs__btn.disabled,
.ring-tabs__btn[disabled] {
  color: $ring-dark-gray-color !important;
}

.ring-tabs__btn__counter {
  position: relative;
  top: -4px;
  left: 2px;
  color: $ring-text-color;
  font-size: 10px;
  line-height: 19px; // prevent jumps in Firefox
}

.ring-tabs__content {
  display: none;
}

.ring-tabs__content_active {
  display: block;
}
